<template>
  <div class="customers-data">
    <div class="search-content">
      <el-input v-model="searchObj.store_name" placeholder="请输入经销商名称" clearable class="input w200"></el-input>

      <el-date-picker
        v-model="searchObj.start_time"
        type="date"
        placeholder="开始时间"
        value-format="yyyy-MM-dd"
        default-time="00:00:00"
      ></el-date-picker>

      <el-date-picker
        v-model="searchObj.end_time"
        type="date"
        placeholder="结束时间"
        value-format="yyyy-MM-dd"
        default-time="23:59:59"
      ></el-date-picker>

      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="logList" style="width:100%;">
      <el-table
        :data="aList"
        border
        style="width: 100%"
        id="table"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <template v-for="item in tableProp">
          <el-table-column
            :prop="item.name"
            :label="item.lable"
            :show-overflow-tooltip="true"
            :key="item.name"
          ></el-table-column>
        </template>
      </el-table>

      <div class="bottom-flex" type="flex">
        <div class="grid-content bg-purple">
          <el-button type="primary" class="exportButton">
            <el-link type="primary" style="color: #fff" :href="href">导出</el-link>
          </el-button>
        </div>
        <pagination
          :arr="aList"
          :total="total"
          :currentPage="currentPage"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        ></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from "@/components/pagination/pagination.vue";
import { resize } from "@/common/js/height.js";
import Qs from "qs";

export default {
  data() {
    return {
      href: "",
      aList: [],
      total: 1,
      currentPage: 1,
      storeName: "",
      searchContent: {
        //该变量一直在变，用来定义默认搜索内容
        storeName: ""
      },
      searchObj: {
        //该变量定义查询传参
        pageSize: localStorage.getItem("eachNum")
          ? parseInt(localStorage.getItem("eachNum"))
          : 10,
        page: 1,
        curpage: 1,
        store_name: "",
        start_time: "",
        end_time: ""
      },
      tableProp: [
        {
          lable: "经销商名称",
          name: "store_name"
        },
        {
          lable: "卡券销售利润",
          name: "salesProfit"
        },
        {
          lable: "卡券发放量",
          name: "grant"
        },
        {
          lable: "卡券核销量",
          name: "verify"
        },
        {
          lable: "销售金额",
          name: "salesVolume"
        },
        {
          lable: "已售卡券成本",
          name: "salesCost"
        },
        {
          lable: "剩余卡券可抵扣金额",
          name: "surplusValue"
        },
        {
          lable: "剩余卡券成本",
          name: "surplusCost"
        },
        {
          lable: "已发放卡券抵扣总金额",
          name: "deduction_amount"
        },
        {
          lable: "优惠金额",
          name: "discount_amount"
        },
        {
          lable: "使用率",
          name: "use_percent"
        },
        {
          lable: "过期率",
          name: "expired_percent"
        },
        {
          lable: "失效率",
          name: "invalid_percent"
        }
      ],
      downloadLoading: false, // 控制导出按钮
      filename: "数据明细",
      autoWidth: "",
      bookType: "xlsx"
    };
  },
  components: {
    pagination
  },
  watch: {
    aList: {
      deep: true,
      handler() {
        this.changeHref();
      }
    }
  },
  methods: {
    getList() {
      var that = this;
      this.searchObj.curpage = that.currentPage;
      this.$http
        .post(
          "/admin/statistics/index.php?act=couponStatistics&op=storesCouponStatistics",
          this.searchObj
        )
        .then(
          res => {
            if (res.code == 1) {
              this.aList = res.data.list;
              this.total = parseInt(res.data.totalCount);
            } else {
              alert(res.msg);
            }
          },
          err => {
            alert(err);
          }
        );
    },
    changeHref() {
      let obj = {};
      this.href = "";
      // console.log(this.searchObj);
      for (let i in this.searchObj) {
        if (this.searchObj[i]) {
          // console.log(this.searchObj[i]);
          obj[i] = JSON.parse(JSON.stringify(this.searchObj[i]));
        }
      }
      obj.is_export = 1;
      obj = Qs.stringify(obj);
	  let isServer = this.$store.state.isServer;
	  if(isServer){
		let host = location.origin;
		host = host.replace('admin','api');
		this.href += host + "/admin/statistics/index.php?act=couponStatistics&op=storesCouponStatistics&" + obj;
	  }else{
		  this.href += "http://api.chejj.cn/admin/statistics/index.php?act=couponStatistics&op=storesCouponStatistics&" + obj;
	  }
      // console.log(this.href);
    },
    search() {
      //1、获取搜索的内容
      // console.log(this.href);

      this.currentPage = 1;
      this.searchObj.page = 1;
      //2、获取内容列表
      this.getList();
    },
    // 重置
    reset() {
      //1、清空搜索的内容
      // console.log(this.href);
      this.searchObj.store_name = "";
      this.searchObj.start_time = "";
      this.searchObj.end_time = "";

      this.searchObj.page = 1;
      this.currentPage = 1;
      // this.changeHref();

      //2、获取内容列表
      this.getList();
    },
    //每页数据
    handleCurrentChange: function(val) {
      this.currentPage = val;
      this.searchObj.page = val;
      /*请求数据*/
      this.getList();
    },
    //分组一页多少数据
    handleSizeChange(val) {
      this.currentPage = 1;
      this.searchObj.page = 1;
      localStorage.setItem("eachNum", val);
      this.searchObj.pageSize = this.eachNum = val;
      /*请求数据*/
      this.getList();
    },
    // 导出表格
    handleDownload() {
      this.downloadLoading = true;
      import("@/common/js/Export2Excel").then(excel => {
        let tHeader = [];
        let filterVal = [];

        this.tableProp.map(value => {
          tHeader.push(value.lable);
          filterVal.push(value.name);
        });
        const list = this.aList;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    }
  },
  mounted() {
    //页面刷新就执行
    resize(this);
    this.getList();
  }
};
</script>

<style scoped lang="scss">
.exportButton {
  margin-top: 10px;
  margin-left: 10px;
}
.bottom-flex {
  display: flex;
  justify-content: space-between;
}
</style>
